<style scoped>
  .page {
    text-align: right;margin-top: 10px
  }
  .item1{
    height: 42px;
    line-height: 40px;

  }
</style>

<template>
    <div>
      <span style="margin-left: 20px">咨询问题：</span> <Input v-model="searchDate.title" placeholder="" style="width: 200px" />
      <span style="margin-left: 20px">姓名：</span><Input v-model="searchDate.name" placeholder="" style="width: 200px" />
      <span style="margin-left: 20px">时间：</span>  <DatePicker  v-model="dateTime" type="daterange" placement="bottom-end" placeholder="" style="width: 200px" @on-ok="show3()"></DatePicker>
      <Button type="primary" style="margin-left: 20px"  @click="show()"><Icon type="ios-search" />搜索</Button>
      <Button type="primary" style="margin-left: 20px"  @click="add()"><Icon type="md-add" />创建</Button>
      <Modal v-model="modalEdit" title="创建基本信息" width="700" cancel-text="关闭"
             @on-ok="ok111(paramData2)" @on-cancel="modalEdit=false" ok-text="确定">
        <Form :model="paramData2" >
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">咨询人姓名:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.name"></Input>

            </Col>
          </Row>
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">咨询人身份证号:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.cardno"></Input>

            </Col>
          </Row>
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">咨询人电话:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.moblie"></Input>
              <Input v-model="paramData2.create_by" style="display: none"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="5" style="text-align: right" class="">事项选择:</Col>
            <Col span="12" offset="1">
              <Select v-model="paramData2.row" style="width:200px">
                <Option v-for="item in cityList2" :value="JSON.stringify(item)" v-bind:key="item.index">{{ item.QL_NAME }}</Option>
              </Select>
            </Col>
          </Row>

          <Row class="item1">
            <Col span="5" style="text-align: right" class="">问题名称:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.title"></Input>
            </Col>
          </Row>
          <Row class="item1" style="height:auto; ">
            <Col span="5" style="text-align: right" class="">问题内容:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </Col>
          </Row>
          <Row class="item1" style="height:auto; ">
            <Col span="5" style="text-align: right" class="">答复内容:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData2.answer" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </Col>
          </Row>

        </Form>
      </Modal>
      <Modal v-model="modal3" title="详情" width="700" cancel-text="关闭"
             @on-cancel="modal3 = false" ok-text="确定" style="position:relative;">
        <Form ref="paramData" :model="paramData"  >
          <Row class="item1">
            <Col span="8" style="text-align: right" class="">咨询人名字:</Col>
            <Col span="12" offset="1">{{paramData.name}}</Col>
          </Row>
          <Row class="item1">
            <Col span="8" style="text-align: right" class="">咨询人身份证号:</Col>
            <Col span="12" offset="1">{{paramData.cardno}}</Col>
          </Row>
          <Row class="item1">
          <Col span="8" style="text-align: right" class="">咨询人电话:</Col>
          <Col span="12" offset="1">{{paramData.moblie}}</Col>
        </Row>
          <Row class="item1">
            <Col span="8" style="text-align: right" class="">咨询时间:</Col>
            <Col span="12" offset="1">{{paramData.create_time}}</Col>
          </Row>
          <Row class="item1">
            <Col span="8" style="text-align: right" class="red-name">咨询标题:</Col>
            <Col span="12" offset="1">{{paramData.title}}</Col>
          </Row>
          <Row class="item1" style="height:auto;">
            <Col span="8" style="text-align: right" class="">咨询内容:</Col>
            <Col span="12" offset="1">{{paramData.questioncontent}}</Col>
          </Row>
          <Row class="item1" style="height:auto;">
            <Col span="8" style="text-align: right" class="">答复内容:</Col>
            <Col span="12" offset="1">{{paramData.answercontent}}</Col>
          </Row>

        </Form>
      </Modal>
      <Modal v-model="showNotice" title="更改基本信息" width="700" cancel-text="关闭"
             @on-ok="updateInfo(paramData3)" @on-cancel="showNotice=false" ok-text="确定">
        <Form :model="paramData3">
          <Row class="item1">
            <Col span="6" style="text-align: right" class="red-name">咨询人名字:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData3.name"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="6" style="text-align: right" class="red-name">咨询人电话:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData3.moblie"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="6" style="text-align: right" class="red-name">咨询人身份证号:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData3.cardno"></Input>
            </Col>
          </Row>
          <Row class="item1">
            <Col span="6" style="text-align: right" class="red-name">问题名称:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData3.title"></Input>
            </Col>
          </Row>
          <Row class="item1" style="height:auto;">
            <Col span="6" style="text-align: right" class="">问题内容:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData3.questioncontent" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </Col>
          </Row>
          <Row class="item1" style="height:auto;">
            <Col span="6" style="text-align: right" class="">回复内容:</Col>
            <Col span="12" offset="1">
              <Input v-model="paramData3.answercontent" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </Col>
          </Row>
        </Form>

      </Modal>
      <div style="margin-top: 20px">
        <Table border :columns="columns1" :data="data6"></Table>
      </div>
      <div  class="page">
        <Page :total="totalnum" :current="currentpageNo" :page-size="currentpageSize"  class="page_style"/>
      </div>
    </div>

</template>

<script>
import { createQuestion, findGuestionConsultationList, date2str, byIdInfo, updateInfoById, findItemList } from '@/api/question'
export default {
  data () {
    return {
      modalEdit: false,
      totalnum: 0,
      modal3: false,
      uuid: '',
      showNotice: false,
      cityList2: [],
      create_by: '',
      currentpageNo: 1,
      currentpageSize: 10,
      paramData2: {},
      paramData3: {},
      model1: '',
      model2: '',
      dateTime: '',
      searchDate: {
        name: '',
        title: '',
        start_time: '',
        end_time: ''
      },
      paramData: {
        title: '',
        questioncontent: '',
        answercontent: '',
        name: '',
        moblie: '',
        create_time: ''
      },

      columns1: [
        { title: '序号', type: 'index', width: '100', align: 'center' },
        { title: '问题名称', key: 'title', width: '200', align: 'center' },
        { title: '咨询人', key: 'name', align: 'center' },
        { title: '咨询人电话', key: 'moblie', align: 'center' },
        { title: '咨询时间', key: 'create_time', align: 'center' },
        { title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.info(params)
                  }
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.update(params)
                  }
                }
              }, '编辑')
            )

            return h('div', temp)
          }

        }
      ],
      data6: [

      ]

    }
  },
  methods: {
    show3 () {
      findItemList().then(ret => {
        console.log('888888')
        console.log(ret)
        this.cityList2 = ret.data.data
      })
    },
    add () {
      this.modalEdit = true
    },
    ok111 (paramData2) {
      paramData2.create_by = this.create_by

      let qlrow = JSON.parse(paramData2.row)
      // paramData2.push(qlrow)
      paramData2['Row_ID'] = qlrow.Row_ID
      paramData2['QL_NAME'] = qlrow.QL_NAME
      console.log(123456)
      console.log(paramData2)
      createQuestion(paramData2).then(ret => {
        console.log(ret)
        this.show()
        this.paramData2 = ''
        if (ret.data.data.count !== 1) {
          this.$Modal.error({
            title: '错误',
            content: '未保存成功'
          })
        }
      })
    },
    show () {
      this.searchDate.start_time = date2str(this.dateTime[0])
      this.searchDate.end_time = date2str(this.dateTime[1])
      let severUserInfo = this.$store.state.user.severUserInfo
      console.log(44444444444444444444444)
      console.log(severUserInfo)
      this.create_by = severUserInfo.loginName
      let data5 = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        name: this.searchDate.name,
        title: this.searchDate.title,
        create_time_start: this.searchDate.start_time,
        create_time_end: this.searchDate.end_time,
        create_by: this.create_by

      }
      findGuestionConsultationList(data5).then(ret => {
        console.log(1111111111)
        console.log(ret)
        this.data6 = ret.data.data.results
        this.totalnum = ret.data.data.totalRecord
      })
    },
    info (param) {
      console.log(22222222222222222)
      console.log(param)
      console.log(param.row.id)
      let id = param.row.id
      let data7 = { id: id }

      byIdInfo(data7).then(ret => {
        console.log(333333333333333)
        console.log(ret)
        this.paramData = ret.data.data
        this.modal3 = true
      })
    },
    update (param) {
      let id = param.row.id
      let data7 = { id: id }
      byIdInfo(data7).then(ret => {
        this.paramData3 = ret.data.data

        console.log(ret)
        this.showNotice = true
        this.uuid = ret.data.data.id
        console.log(66666666666666)
        console.log(ret.data.data.id)
      })
    },
    updateInfo () {
      let uuid = this.uuid
      let data8 = this.paramData3
      data8['id'] = uuid
      console.log(555555555555)
      console.log(data8)
      updateInfoById(data8).then(ret => {
        console.log(ret)
        this.show()
      })
    }
  },
  mounted () {
    this.show()
    this.show3()
  }
}
</script>
